<template>
  <n-flex class="login-cont" align="center">
    <n-grid :cols="3">
      <n-grid-item :offset="1">
          <n-card>
            <n-form ref="formRef" :model="modelRef" :rules="rules">
              <n-form-item path="username" label="账号">
                <n-input v-model:value="modelRef.username" @keydown.enter.prevent />
              </n-form-item>
              <n-form-item path="password" label="密码">
                <n-input
                  v-model:value="modelRef.password"
                  type="password"
                  @keydown.enter.prevent
                />
              </n-form-item>
              
              <n-row :gutter="[0, 24]">
                <n-col :span="24">
                  <div style="display: flex; justify-content: flex-end">
                    <n-button
                      round
                      type="primary"
                      @click="handleLogin"
                    >
                      登录
                    </n-button>
                  </div>
                </n-col>
              </n-row>
            </n-form>
          </n-card>
      </n-grid-item>
    </n-grid>
  </n-flex>
</template>

<script setup>
import { useMessage } from "naive-ui";
import { ref } from "vue";
import { useAccount } from "../../store/account.js";
const formRef = ref(null); //获取表单对象
const message = useMessage();
const modelRef = ref({  //提取表单数据
  username: '三丰',
  password: '123'
});
//表单验证规则
const rules = {
  username: [
    {
      required: true,
      // trigger: ["input", "blur"],
      message: "请输入账号"
    }
  ],
  password: [
    {
      required: true,
      message: "请输入密码"
    }
  ]
};

const account = useAccount()
//表单提交按钮
function handleLogin(e) {
  e.preventDefault();
  formRef.value?.validate(async (errors) => {
    if (!errors) {
      console.log('111',modelRef.value);
      await account.loginAccount(modelRef.value) //触发状态机方法
    } else {
      console.log(errors);
      message.error("验证失败");
    }
  });
}


</script>
<style>
.login-cont{
  height: 100vh;
  background-color: #E7F5EE;
}
</style>